<script setup>
import {onMounted, ref} from "vue";
import {createSite, deleteSite, getIndexVDO, selectSite, updateSite} from "../../../http/cms/site.js";


const indexVDO = ref({
  siteList: [],
  dataStatus: {
    ukId: "",
    code: "",
    name: "",
    dictItemList: []
  }
})


const siteName = ref("")

const showSiteForm = ref(false)
let siteUpdate = ref(false)
const siteForm = ref({})

const showSiteDetailsForm = ref(false)
const siteDetailsForm = ref({})

function showSiteCreate() {
  siteForm.value = {}
  siteForm.value = {
    status: 'enable'
  }
  siteUpdate.value = false
  showSiteForm.value = true
}

function showSiteUpdate(site) {
  siteDetailsForm.value = site
  siteUpdate.value = true
  showSiteDetailsForm.value = true
}

function handleSiteCreate() {
  createSite(siteForm.value).then(response => {
    handleIndexVDO()
    showSiteForm.value = false
  })
}

function handleSiteUpdate() {
  updateSite(siteDetailsForm.value).then(response => {
    handleIndexVDO()
    showSiteDetailsForm.value = false
  })
}

function handleSiteSave() {
  if (siteUpdate.value) {
    handleSiteUpdate()
  } else {
    handleSiteCreate()
  }
}

function handleSiteDelete(ukId) {
  deleteSite(ukId).then(response => {
    handleIndexVDO()
  })
}

function handleIndexVDO() {
  getIndexVDO().then(response => {
    indexVDO.value = response.data
  })
}

onMounted(() => {
  handleIndexVDO()
})


</script>

<template>
  <div
      style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden; padding-left: 5px; padding-right: 5px">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px; padding-left: 5px">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="名称">
          <el-input style="width: 200px" v-model="siteName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSiteList">查询</el-button>
          <el-button type="primary" @click="showSiteCreate()">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; width: 100%; height: 100%; overflow: auto;">
      <el-table
          highlight-current-row
          :data="indexVDO.siteList" border style="width: 100%;">
        <el-table-column prop="code" label="编码" min-width="100"/>
        <el-table-column prop="name" label="名称" min-width="100"/>
        <el-table-column prop="status" label="状态" width="70">
          <template #default="scope">
            <el-switch
                @change="roleForm = scope.row; handleSiteUpdate()"
                active-value="enable"
                inactive-value="disable"
                v-model="scope.row.status "
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60"/>
        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-button @click="showSiteUpdate(scope.row)">
              编辑
            </el-button>
            <el-popconfirm
                width="170"
                hide-icon
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="handleSiteDelete(scope.row.ukId)"
                :title="'是否确认删除站点 [ ' + scope.row.name + ' ] ？'">
              <template #reference>
                <el-button type="danger">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog title="新建栏目"
             @close="siteForm = {}"
             v-model="showSiteForm"
             :close-on-click-modal="false"
             label-width="80px">
    <el-form ref="form" :model="siteForm" label-width="80px">
      <el-form-item label="编码">
        <el-input v-model="siteForm.code"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="siteForm.name"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="siteForm.status">
          <el-option
              v-for="item in indexVDO.dataStatus.dictItemList"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="siteForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="showSiteForm = false; siteForm = {}">Cancel</el-button>
        <el-button type="primary" @click="handleSiteSave">Save</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-drawer
      :close-on-click-modal="false"
      v-model="showSiteDetailsForm"
      title="设置站点详情"
      direction="rtl">
    <div class="demo-drawer__content">
      <el-form :model="siteDetailsForm">
          <el-form-item label="编码">
            <el-input v-model="siteDetailsForm.code"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="siteDetailsForm.name"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="siteDetailsForm.status">
              <el-option
                  v-for="item in indexVDO.dataStatus.dictItemList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="siteDetailsForm.sort" type="number" min="0" max="90000"></el-input>
          </el-form-item>
        </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="showSiteDetailsForm = false; siteDetailsForm = {}">Cancel</el-button>
        <el-button type="primary" @click="handleSiteSave">Save</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<style scoped>
</style>